<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI选股 - 股票详情</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 底部操作栏样式 */
        .action-bar {
            position: fixed;
            bottom: 60px;
            right: 15px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            max-width: 414px;
            margin: 0 auto;
            z-index: 99;
            gap: 8px;
        }
        
        .action-button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        .action-button i {
            font-size: 16px;
            margin: 0;
        }
        
        .primary-button {
            background-color: #1989fa;
            color: white;
        }
        
        .secondary-button {
            background-color: #ffffff;
            color: #1989fa;
            border: 1px solid #e8e8e8;
        }
        
        /* 调整内容区域底部内边距，避免被底部标签栏遮挡 */
        .content {
            padding-bottom: 60px;
        }
        
        /* 价格提醒弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            max-width: 414px;
            margin: 0 auto;
        }
        
        .modal-content {
            background-color: #fff;
            border-radius: 8px;
            width: 90%;
            max-width: 320px;
            overflow: hidden;
        }
        
        .modal-header {
            padding: 16px;
            border-bottom: 1px solid #ebedf0;
            font-size: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h3 {
            font-weight: 600;
            margin: 0;
        }
        
        .modal-body {
            padding: 16px;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .modal-footer {
            display: flex;
            border-top: 1px solid #ebedf0;
            padding: 12px 16px;
            justify-content: flex-end;
            gap: 8px;
        }

        /* 添加持仓弹窗样式 */
        .position-modal-content {
            width: 95%;
            max-width: 360px;
            max-height: 90vh;
        }

        /* 股票详情页样式 */
        .stock-header {
            padding: 10px 15px;
            background-color: #1989fa;
            color: white;
        }

        .stock-price-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 2px 0;
        }

        .stock-detail-price {
            font-size: 26px;
            font-weight: 600;
            line-height: 1;
        }

        .stock-detail-change {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
            line-height: 1.2;
            background-color: rgba(255, 255, 255, 0.2);
            margin-bottom: 2px;
        }

        .stock-detail-change.up {
            background-color: #f5433e;
        }

        .stock-detail-change.down {
            background-color: #00a651;
        }

        .stock-detail-info {
            display: flex;
            justify-content: space-between;
            margin-top: 6px;
            font-size: 13px;
        }

        .stock-detail-item {
            flex: 1;
            text-align: center;
        }

        .stock-detail-label {
            font-size: 11px;
            opacity: 0.8;
            margin-bottom: 1px;
        }

        .stock-detail-value {
            font-size: 12px;
        }

        .stock-name-row {
            margin-bottom: 2px;
        }

        /* 相关新闻样式 */
        .news-item {
            padding: 10px 15px;
            border-bottom: 1px solid #ebedf0;
        }

        .news-item:last-child {
            border-bottom: none;
        }

        .news-title {
            font-size: 13px;
            line-height: 1.4;
            color: #323233;
            margin-bottom: 2px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .news-meta {
            display: flex;
            align-items: center;
            font-size: 11px;
            color: #969799;
        }

        .news-source {
            margin-right: 6px;
        }

        .news-time {
            position: relative;
            padding-left: 6px;
        }

        .news-time::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1px;
            height: 10px;
            background-color: #ebedf0;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 导航栏 -->
        <div class="navbar">
            <div class="navbar-btn">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="navbar-title">股票详情</div>
            <div class="navbar-btn">
                <i class="far fa-star" id="favorite-btn"></i>
            </div>
        </div>

        <!-- Toast 提示 -->
        <div id="toast" class="fixed top-16 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg opacity-0 transition-opacity duration-300 z-50"></div>

        <!-- 主内容区域 -->
        <div class="content">
            <!-- 股票基本信息头部 -->
            <div class="stock-header">
                <div class="flex justify-between items-center stock-name-row">
                    <div>
                        <h2 class="text-base font-bold">腾讯控股</h2>
                        <div class="text-xs opacity-80" style="margin-top: -1px;">00700.HK</div>
                    </div>
                    <div class="text-right">
                        <div class="text-xs opacity-80">实时更新</div>
                        <div class="text-xs" style="margin-top: -1px;">2023-08-15 15:30</div>
                    </div>
                </div>
                
                <div class="stock-price-row">
                    <div class="stock-detail-price">388.60</div>
                    <div class="stock-detail-change up">+8.40 (+2.21%)</div>
                </div>
                
                <div class="stock-detail-info">
                    <div class="stock-detail-item">
                        <div class="stock-detail-label">开盘</div>
                        <div class="stock-detail-value">382.20</div>
                    </div>
                    <div class="stock-detail-item">
                        <div class="stock-detail-label">最高</div>
                        <div class="stock-detail-value">390.40</div>
                    </div>
                    <div class="stock-detail-item">
                        <div class="stock-detail-label">最低</div>
                        <div class="stock-detail-value">380.00</div>
                    </div>
                    <div class="stock-detail-item">
                        <div class="stock-detail-label">成交量</div>
                        <div class="stock-detail-value">1.89亿</div>
                    </div>
                </div>
            </div>

            <!-- 持仓记录面板 -->
            <div class="card">
                <div class="card-title flex justify-between items-center">
                    <span>我的持仓记录</span>
                    <span class="text-xs text-blue-500">编辑</span>
                </div>
                <div class="card-content">
                    <div class="grid grid-cols-2 gap-2 mb-3">
                        <div class="bg-gray-100 p-2 rounded">
                            <div class="text-xs text-gray-500">当前持仓</div>
                            <div class="font-medium">1000股</div>
                        </div>
                        <div class="bg-gray-100 p-2 rounded">
                            <div class="text-xs text-gray-500">持仓市值</div>
                            <div class="font-medium">388,600.00元</div>
                        </div>
                        <div class="bg-gray-100 p-2 rounded">
                            <div class="text-xs text-gray-500">持仓成本</div>
                            <div class="font-medium">380.20元</div>
                        </div>
                        <div class="bg-gray-100 p-2 rounded">
                            <div class="text-xs text-gray-500">盈亏比例</div>
                            <div class="font-medium text-red-500">+2.21%</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- AI分析 -->
            <div class="card">
                <div class="card-title flex justify-between items-center">
                    <span>AI分析报告</span>
                    <div class="flex items-center gap-2">
                        <span class="text-xs text-blue-500">2023-08-15</span>
                        <button id="refresh-ai-analysis" class="text-blue-500 hover:text-blue-600" title="刷新分析">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="card-content md-content">
                    <h3 class="text-lg font-medium mb-2">腾讯控股 (00700.HK)</h3>
                    
                    <p>腾讯控股近期呈现强劲上涨趋势，主要受益于以下因素：</p>
                    
                    <ul class="list-disc pl-5 my-2">
                        <li>Q2财报预期优于市场预期，游戏业务增长稳健</li>
                        <li>广告业务复苏迹象明显，环比增长超10%</li>
                        <li>云服务和金融科技业务保持高速增长</li>
                        <li>AI相关战略布局逐步落地，市场反应积极</li>
                    </ul>
                    
                    <p>从技术面看，股价突破了380港元重要阻力位，MACD金叉形成，KDJ指标显示未到超买区域，短期仍有上涨动能。</p>
                    
                    <p>风险因素：</p>
                    <ul class="list-disc pl-5 my-2">
                        <li>监管政策不确定性</li>
                        <li>宏观经济增长放缓可能影响广告业务</li>
                        <li>海外市场竞争加剧</li>
                    </ul>
                    
                    <p class="font-medium">AI建议：值得关注，可设置价格提醒，目标价420港元，止损位370港元。</p>
                </div>
            </div>

            <!-- 相关新闻 -->
            <div class="card">
                <div class="card-title">
                    <span>相关新闻</span>
                </div>
                <div class="news-item">
                    <div class="news-title">腾讯Q2营收同比增长11%，净利润增长22%</div>
                    <div class="news-meta">
                        <span class="news-source">财经网</span>
                        <span class="news-time">1小时前</span>
                    </div>
                </div>
                <div class="news-item">
                    <div class="news-title">腾讯加码AI投资，与多家芯片企业达成合作</div>
                    <div class="news-meta">
                        <span class="news-source">科技日报</span>
                        <span class="news-time">3小时前</span>
                    </div>
                </div>
                <div class="news-item">
                    <div class="news-title">多家券商上调腾讯目标价，看好其AI战略</div>
                    <div class="news-meta">
                        <span class="news-source">证券时报</span>
                        <span class="news-time">5小时前</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="action-bar">
            <div class="action-button secondary-button" id="set-alert-btn" title="价格提醒">
                <i class="fas fa-bell"></i>
            </div>
            <div class="action-button primary-button" id="add-position-btn" title="添加持仓">
                <i class="fas fa-plus"></i>
            </div>
        </div>

        <!-- 底部标签栏 -->
        <div class="tabbar">
            <div class="tab-item">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-chart-line"></i>
                <span>每日推荐</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-list-ul"></i>
                <span>自选</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>

        <!-- 价格提醒弹窗 -->
        <div class="modal" id="price-alert-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="text-lg font-medium">设置价格提醒</h3>
                    <button class="text-gray-400" id="close-alert-modal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-4">
                        <div class="text-sm mb-2">价格上涨至(港元)</div>
                        <div class="bg-gray-100 rounded px-3 py-2 flex items-center">
                            <input type="number" class="bg-transparent w-full outline-none" value="400" placeholder="输入价格">
                        </div>
                    </div>
                    <div class="mb-2">
                        <div class="text-sm mb-2">价格下跌至(港元)</div>
                        <div class="bg-gray-100 rounded px-3 py-2 flex items-center">
                            <input type="number" class="bg-transparent w-full outline-none" value="370" placeholder="输入价格">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700" id="cancel-alert">取消</button>
                    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg font-medium ml-2" id="confirm-alert">确定</button>
                </div>
            </div>
        </div>

        <!-- 添加持仓记录弹窗 -->
        <div class="modal" id="add-position-modal">
            <div class="modal-content position-modal-content">
                <div class="modal-header">
                    <h3 class="text-lg font-medium">添加持仓记录</h3>
                    <button class="text-gray-400" id="close-position-modal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- 已选股票信息 -->
                    <div class="bg-blue-50 rounded-lg p-3 mb-4">
                        <div class="flex justify-between items-center">
                            <div>
                                <div class="font-medium">腾讯控股</div>
                                <div class="text-xs text-gray-500">00700.HK</div>
                            </div>
                            <div class="text-right">
                                <div class="font-medium">388.60</div>
                                <div class="text-xs text-red-500">+8.40 (+2.21%)</div>
                            </div>
                        </div>
                    </div>
                    
                                         <!-- 持仓表单 -->
                     <div class="space-y-4">
                         <div>
                             <label class="form-label">持仓数量 (股)</label>
                             <input type="number" class="form-input" placeholder="请输入持仓数量">
                         </div>
                         
                         <div>
                             <label class="form-label">买入价格 (元/股)</label>
                             <input type="number" step="0.01" class="form-input" placeholder="请输入买入价格">
                         </div>
                         
                         <div>
                             <label class="form-label">买入日期</label>
                             <input type="date" class="form-input" value="2023-08-10">
                         </div>
                     </div>
                </div>
                <div class="modal-footer">
                    <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700" id="cancel-position">取消</button>
                    <button class="px-4 py-2 bg-blue-500 text-white rounded-lg font-medium ml-2" id="save-position">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 价格提醒弹窗显示/隐藏
        document.getElementById('set-alert-btn').addEventListener('click', function() {
            document.getElementById('price-alert-modal').style.display = 'flex';
        });

        document.getElementById('close-alert-modal').addEventListener('click', function() {
            document.getElementById('price-alert-modal').style.display = 'none';
        });

        document.getElementById('cancel-alert').addEventListener('click', function() {
            document.getElementById('price-alert-modal').style.display = 'none';
        });

        document.getElementById('confirm-alert').addEventListener('click', function() {
            document.getElementById('price-alert-modal').style.display = 'none';
            // 这里添加设置价格提醒的逻辑
            alert('价格提醒设置成功');
        });

        // 添加持仓记录按钮点击事件
        document.getElementById('add-position-btn').addEventListener('click', function() {
            // 显示添加持仓记录弹窗
            document.getElementById('add-position-modal').style.display = 'flex';
        });

        // 关闭添加持仓记录弹窗
        document.getElementById('close-position-modal').addEventListener('click', function() {
            document.getElementById('add-position-modal').style.display = 'none';
        });

        document.getElementById('cancel-position').addEventListener('click', function() {
            document.getElementById('add-position-modal').style.display = 'none';
        });

        document.getElementById('save-position').addEventListener('click', function() {
            document.getElementById('add-position-modal').style.display = 'none';
            // 这里添加保存持仓记录的逻辑
            alert('持仓记录已保存');
        });

        // 点击弹窗外部区域关闭弹窗
        document.querySelectorAll('.modal').forEach(function(modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.style.display = 'none';
                }
            });
        });

        // AI分析刷新按钮点击事件
        document.getElementById('refresh-ai-analysis').addEventListener('click', function() {
            const button = this;
            // 添加旋转动画
            button.querySelector('i').classList.add('animate-spin');
            
            // 模拟刷新请求
            setTimeout(() => {
                // 移除旋转动画
                button.querySelector('i').classList.remove('animate-spin');
                alert('AI分析报告已更新');
            }, 1500);
        });

        // 自选股票功能
        document.addEventListener('DOMContentLoaded', function() {
            const favoriteBtn = document.getElementById('favorite-btn');
            const toast = document.getElementById('toast');
            
            // 从localStorage获取自选股票列表
            let favorites = JSON.parse(localStorage.getItem('stockFavorites') || '[]');
            const currentStock = '00700.HK'; // 当前股票代码
            
            // 初始化按钮状态
            if (favorites.includes(currentStock)) {
                favoriteBtn.classList.remove('far');
                favoriteBtn.classList.add('fas');
            }
            
            // 显示Toast提示
            function showToast(message) {
                toast.textContent = message;
                toast.style.opacity = '1';
                setTimeout(() => {
                    toast.style.opacity = '0';
                }, 2000);
            }
            
            // 切换自选状态
            favoriteBtn.addEventListener('click', function() {
                const isFavorite = favorites.includes(currentStock);
                
                if (isFavorite) {
                    // 移除自选
                    favorites = favorites.filter(stock => stock !== currentStock);
                    favoriteBtn.classList.remove('fas');
                    favoriteBtn.classList.add('far');
                    showToast('已移除自选');
                } else {
                    // 添加自选
                    favorites.push(currentStock);
                    favoriteBtn.classList.remove('far');
                    favoriteBtn.classList.add('fas');
                    showToast('已添加自选');
                }
                
                // 保存到localStorage
                localStorage.setItem('stockFavorites', JSON.stringify(favorites));
            });
        });
    </script>
</body>
</html>